<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹幕系统</title>

    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/elementui.js"></script>
    <script src="./js/moment.min.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/danmu.css">
    <link rel="stylesheet" href="./css/review.css">
    <link rel="stylesheet" href="./css/elementui.css">
    <link rel="stylesheet" href="./css/choujiang.css" />
    <link rel="stylesheet" type="text/css" href="./css/toastr.min.css">
    <script type="text/javascript" src="./js/toastr.min.js"></script>
    <script src="./js/choujiang.js"></script>
    <script type="text/javascript" src="./js/ThreeCanvas.js"></script>
    <script type="text/javascript" src="./js/Snow.js"></script>
    <style>
        .iframeWrap{
            position: absolute;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            animation: all 2s linear;
            opacity: 1;
        }
        .iframeWraphide{
            opacity: 0;
        }
        .changetype{
            position: absolute;
            z-index: 200;
            top:30px;
            width: 100px;
            right: 30px;
            bottom: 100px;
        }
        .el-button{
            background: rgb(41, 89, 71);
            border:0;
        }
    </style>
    <script>
        //工具函数

        // 延时
        function awaitTime(sec){
            return new Promise((resolve,reject)=>{
                setTimeout(() => {
                    resolve();
                }, 1000*sec);
            })
        }

        // 请求封装 页面只需要get 所以简化$.ajax
        function Request(url){
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url:url,
                    method:'GET',
                    contentType:'app1lication/json',
                    success:function(res){
                        resolve(res);
                    },
                    error:function(err){
                        reject(err);
                    }
                })
            })
        }
        
    </script>
      
      <script>
            // 新弹幕
            let newdanmuarr = [];
            // 旧弹幕
            let olddanmuarr = [];
            // 是否启动
            let isstart = false;
            // 是否请求中
            let isrequesting = false;
            // 处理弹幕
            async function handledanmu(){
                // 如果正在请求中那么跳过这次处理
                if(!isrequesting){
                    // 判断是否有新弹幕
                    let hasnew = newdanmuarr.length>0;
                    //  判断渲染新的还是旧弹幕
                    let danmuarr = hasnew?newdanmuarr:olddanmuarr
                    if(danmuarr.length>0){
                        // 插入判断后的数组第一条弹幕
                        let item = danmuarr[0];
                        $('#app1').append(`
                            <div style="top:${Math.random()*80}vh" class="danmu-container" id="${item.id}">
                                <div class="speech-bubble speech-bubble${item.style_type}"><div class="speech-bubble-txt">${item.content}</div></div>
                            </div>
                        `);
                        // 15秒后删除插入的这条弹幕
                        let removeid = danmuarr[0]['id'];
                        setTimeout(() => {
                            $(`#${removeid}`).remove();
                        }, 1000*15);

                        // 延时随机时间后删除判断后的数组的第一条
                        await awaitTime((Math.random()*2+0.5));
                        danmuarr.shift();
                    }
                }
                // 等待0.5s后执行下一次操作
                await awaitTime(0.5);
                handledanmu();
            }
            // 获取数据
            async function getData(){
                isrequesting = true;
                // 每次都请求新弹幕数据
                await getNew();// 里面有结果 拼接数组 然后去重
                //await  
                if(olddanmuarr.length<5){// 旧弹幕少于5条 重新取旧数组 然后拼接去重
                    await getOld();// 里面有结果 拼接数组 然后去重
                }

                // 如果没有启动 那么启动插入弹幕操作
                if(!isstart){
                    handledanmu();
                    isstart = true;
                }
                await awaitTime(0.5);
                isrequesting = false;
            }
            $(function(){
                // 进入页面 开始获取数据  然后定时10s 取一次
                getData();
                setInterval(()=>{
                    getData();
                },1000*10)
            })
            



             // 获取新弹幕
             async function getNew(){
                return new Promise(async (resolve,reject)=>{
                   Request('/api/danmuactive').then((data)=>{
                        let resnewdanmu = data;
                        newdanmuarr = newdanmuarr.concat(resnewdanmu)
                        // 去重
                        newdanmuarr = [...new Set(newdanmuarr)]
                        resolve();
                    })
                   
                   
                })
                
            }

            // 获取旧弹幕
            async function getOld(){
                return new Promise(async (resolve,reject)=>{
                    Request('/api/danmuactiveold').then((data)=>{
                        let resnewdanmu = data;
                        olddanmuarr = olddanmuarr.concat(resnewdanmu)
                        // 去重
                        olddanmuarr = [...new Set(olddanmuarr)]
                        resolve();
                    })
                    
                })
            }
           
    </script>
</head>
<body onLoad="init()">
   
    <div id="app">
        <div class="iframeWrap" :class="pagetype=='danmu'?'':'iframeWraphide'" id="iframeWrap1">
            <div id="app1">
           
            </div>
        </div>
        <div class="iframeWrap" :class="pagetype=='choujiang'?'':'iframeWraphide'" id="iframeWrap2">
            <div id="pageBg"  class="danmu-container">
                <div class="choujiang" v-if="step==1">
                  <div class="choujiangtitle">奖品设置</div>
                  <el-form ref="form"  label-width="80px">
                      <el-form-item label="选择奖品">
                          <el-select v-model="jpid" placeholder="请选择">
                              <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                      </el-form-item>
                      <el-form-item label="奖品个数">
                          <el-input v-model="count"></el-input>
                      </el-form-item>
                      <el-form-item >
                          <el-button type="primary" @click="moveed"
                          >开始</el-button
                      >
                      </el-form-item>
                     
                  </el-form>
                  
                </div>
                <div class="choujiangdonghua">
                    <canvas id="canvas"></canvas>
                </div>
                <div class="scanWrap">
                 
                  <el-button type="primary" v-if="step==2" @click="end">停止</el-button>
                </div>
                <div class="priceDetail" :class="step==3?'priceDetailshow':''">
                  <div class="priceDetailHeader">
                    <div class="priceDetailHeaderTitle"></div>
                    <div class="priceDetailHeaderClose" @click="tostart"><i class="el-icon-close"></i></div>
                  </div>
                  <div class="listline">
                    <div v-for="item in priceList" class="headeritem">
                      <img :src="item.avatarUrl"/>
                      <div class="name">
                        <div class="nikeName">
                          {{item.nickName}}
                        </div>
                        <div class="phone">
                          {{item.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}
                        </div>
                        
                      </div>
                  </div>
                  </div>
                  
                </div>
              </div>
        </div>
    </div>
    <script>
       
      window.userlist = [];
      new Vue({
        el: "#app",
        data: {
          step:1,
          jpid: "",
          count:'',
          priceList:[],
          pagetype:'danmu',
            danmupage:window.location.origin+'/danmusys.html',
            choujiangpage:window.location.origin+'/choujiang.html',      
          options: [
            {
              value: "0",
              label: "特等奖",
            },
            {
              value: "1",
              label: "一等奖",
            },
            {
              value: "2",
              label: "二等奖",
            },
            {
              value: "3",
              label: "三等奖",
            },
            {
              value: "4",
              label: "四等奖",
            },
            {
              value: "5",
              label: "五等奖",
            },
          ],
        },
        mounted() {
            window.danmupage = this;
            this.getAllUsers();
            window.addEventListener('keyup',function(e){
                console.log(e)
                if(e.keyCode==115){
                    if(window.danmupage.pagetype=='danmu'){
                        window.danmupage.changetype();
                    }else if(window.danmupage.pagetype=='choujiang'&&window.danmupage.step==1){
                        window.danmupage.changetype();
                    }
                }
            })
        },
        methods: {
            changetype(){
                if(this.pagetype=='danmu'){
                    this.pagetype='choujiang';
                    $('.xuehua').hide();
                }else{
                    this.pagetype='danmu';
                    $('.xuehua').show();
                }
            },
            moveed() {
                $.ajax({
                    url: "/api/price/cjCan",
                    method: "POST",
                    contentType: "application/json",
                      data: JSON.stringify({
                      price_type: this.jpid,
                      count:Number(this.count)
                  }),
                    success: (res) => {
                      this.step=2;
                      window.speed = 1.02;
                    },
                    error: function () {
                      toastr.error('抽奖人数大于未中奖总人数');
                    },
                });
            },
            tostart(){
              this.step=1;
              window.pause = false;
              window.speed = 1.005;
              this.jpid = '';
              this.count = '';
            },
            getAllUsers(){
              $.ajax({
                    url: "/api/user/query",
                    method: "GET",
                    contentType: "application/json",
                    success: (res) => {
                        console.log(res);
                        window.userlist = res;
                        restart();
                    },
                    error: function () {},
                });
            },
            getPriceList() {
                $.ajax({
                    url: "/api/price/query",
                    method: "GET",
                    contentType: "application/json",
                    success: (res) => {
                        console.log(res);
                        this.priceList = res;
                        this.step=3;
                    },
                    error: function () {},
                });
            },
            end() {
                $.ajax({
                url: "/api/price/cj",
                method: "POST",
                contentType: "application/json",
                data: JSON.stringify({
                    price_type: this.jpid,
                    count:Number(this.count)
                }),
                success: (res) => {
                    window.pause = true
                    this.getPriceList();
                },
                error: function () {
                  toastr.error('抽奖人数大于未中奖总人数');
                },
                });
          },
        },
      });
      
    </script>
    
</body>
</html>